<%--
  Created by IntelliJ IDEA.
  User: 唐清枫
  Date: 2023/9/13
  Time: 10:02
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>个人信息查看</title>
    <script src="../static/js/jquery-3.2.1.min.js"></script>
    <script src="../static/js/vue.js"></script>
    <link href="//unpkg.com/layui@2.8.0/dist/css/layui.css" rel="stylesheet">
    <!-- 引入 layui.js -->
    <script src="//unpkg.com/layui@2.8.0/dist/layui.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="../static/js/Core_values.js"></script>

</head>
<body>
<script src="../static/js/flower.js"></script>

<div id="app">
    <el-table
            :data="tableData"
            border
            style="width: 100%"
    >

        <el-table-column
                prop="userName"
                label="账号"
                width="180">
        </el-table-column>
        <el-table-column
                prop="userRealName"
                label="姓名"
                width="150">
        </el-table-column>
        <el-table-column
                prop="deptName"
                label="部门"
                width="120">
        </el-table-column>
        <el-table-column
                prop="roleName"
                label="角色"
                width="150">
        </el-table-column>
        <el-table-column
                prop="userTel"
                label="电话"
                width="220">
        </el-table-column>
        <el-table-column
                prop="userEmail"
                label="邮箱"
                width="220">
        </el-table-column>
        <el-table-column
                label="操作"
                width="190">
            <template slot-scope="scope">
                <el-button type="info" size="small" @click="showUserMessage(scope.row)">编辑</el-button>
            </template>
        </el-table-column>
    </el-table>


    <div>
        <!-- 模态框，用作修改数据时做数据回显用 -->
        <%--        dialogFormVisible  :是否显示模态框       --%>
        <el-dialog title="信息修改" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                </el-dropdown>
                <el-form-item label="电话" :label-width="formLabelWidth">
                    <el-input v-model="form.userTel" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" :label-width="formLabelWidth">
                    <el-input v-model="form.userEmail" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateLoginUser">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</div>

<script>
    new Vue({
        el: "#app",
        data: {
            tableData: [],
            userName:JSON.parse(localStorage.getItem("userName")),
            form:{
                userTel:"",
                userEmail:"",
                userName:JSON.parse(localStorage.getItem("userName"))
            },
            formLabelWidth:"80px",
            dialogFormVisible:false
        },
        methods: {
            loginUser(){
                var _this=this
                $.ajax({
                    url:"../user/selectLoginUser/"+_this.userName,
                    type:"post",
                    dataType:"json",
                    success:function (res) {
                        if (res.status == 200){
                            _this.tableData = res.object
                        }
                    }
                })
            },
            showUserMessage(data){
                this.dialogFormVisible=true
                this.form.userTel = data.userTel
                this.form.userEmail = data.userEmail
            },
            updateLoginUser() {                                   //修改用户数据
                var _this = this
                $.ajax({
                    url: "../user/updateLoginUser",
                    type: "post",
                    data: JSON.stringify(_this.form),
                    dataType: "json",
                    contentType: "application/json",
                    success: function (res) {
                        if (res.status == 200) {
                            _this.$message.success(res.message)
                            _this.dialogFormVisible = false
                            _this.loginUser()
                        } else {
                            _this.$message.error(res.message)
                        }

                    }
                })
            },
        },
        mounted: function () {
            this.loginUser()
        }
    })
</script>

</body>

</html>
